﻿<!DOCTYPE html>
<!-- saved from url=(0053)http://jqueryui.com/resources/demos/slider/range.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Slider - Range slider</title>
    <link rel="stylesheet" href="js/jquery-ui.css">

    <script src="js/jquery-1.8.3.js"></script>

    <script src="js/jquery-ui.js"></script>

    <link rel="stylesheet" href="js/style.css">

    <script>
        $(function() {

            $("#slider-range").slider({
                range: true,
                min: 5,
                max: 23,
                values: [7, 9],
                slide: function(event, ui) {
                    $("#amount").val("" + ui.values[0] + ":00 às " + ui.values[1] + ":00");
                }
            });

            $("#amount").val("" + $("#slider-range").slider("values", 0) +
			":00 às " + $("#slider-range").slider("values", 1) + ":00");



            $("#Div1").slider({
                range: true,
                min: 5,
                max: 23,
                values: [7, 9],
                slide: function(event, ui) {
                $("#Text3").val("" + ui.values[0] + ":00 às " + ui.values[1] + ":00");
                }
            });

            $("#Text3").val("" + $("#Div1").slider("values", 0) +
			":00 às " + $("#Div1").slider("values", 1) + ":00");




            $("#Div2").slider({
                range: true,
                min: 5,
                max: 23,
                values: [7, 9],
                slide: function(event, ui) {
                $("#Text6").val("" + ui.values[0] + ":00 às " + ui.values[1] + ":00");
                }
            });

            $("#Text6").val("" + $("#Div2").slider("values", 0) +
			":00 às " + $("#Div2").slider("values", 1) + ":00");




            $("#Div3").slider({
                range: true,
                min: 5,
                max: 23,
                values: [7, 9],
                slide: function(event, ui) {
                $("#Text9").val("" + ui.values[0] + ":00 às " + ui.values[1] + ":00");
                }
            });

            $("#Text9").val("" + $("#Div3").slider("values", 0) +
			":00 às " + $("#Div3").slider("values", 1) + ":00");




            $("#Div4").slider({
                range: true,
                min: 5,
                max: 23,
                values: [7, 9],
                slide: function(event, ui) {
                $("#Text12").val("" + ui.values[0] + ":00 às " + ui.values[1] + ":00");
                }
            });

            $("#Text12").val("" + $("#Div4").slider("values", 0) +
			":00 às " + $("#Div4").slider("values", 1) + ":00");

        });
	</script>

</head>
<body>
    <table width="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#99CCFF">
        <tr>
            <td width="50%" class="textoNegro">
                <strong>Dia</strong>
            </td>
            <td width="50%" cellpadding="10" class="textoNegro">
                <strong>Disponibilidade</strong>
            </td>
        </tr>
        <tr>
            <td width="50%" align="center" valign="middle" class="textoDia">
                <strong>1</strong>
            </td>
            <td width="50%" cellpadding="10" class="textoNegro">
                <table>
                    <tr>
                        <td>
                            <label>
                                Hora:</label>
                            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;">
                        </td>
                        <td>
                            Disciplina
                        </td>
                        <td>
                            Aluno
                        </td>
                        <td>
                            Grupo
                        </td>
                        <td>
                            Valor
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="slider-range" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                            </div>
                        </td>
                        <td>
                            <select id="Select1">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text1" type="text" />
                        </td>
                        <td>
                            <select id="Select2">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text2" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                Hora:</label>
                            <input type="text" id="Text3" style="border: 0; color: #f6931f; font-weight: bold;">
                        </td>
                        <td>
                            Disciplina
                        </td>
                        <td>
                            Aluno
                        </td>
                        <td>
                            Grupo
                        </td>
                        <td>
                            Valor
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="Div1" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                            </div>
                        </td>
                        <td>
                            <select id="Select3">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text4" type="text" />
                        </td>
                        <td>
                            <select id="Select4">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text5" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                Hora:</label>
                            <input type="text" id="Text6" style="border: 0; color: #f6931f; font-weight: bold;">
                        </td>
                        <td>
                            Disciplina
                        </td>
                        <td>
                            Aluno
                        </td>
                        <td>
                            Grupo
                        </td>
                        <td>
                            Valor
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="Div2" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                            </div>
                        </td>
                        <td>
                            <select id="Select5">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text7" type="text" />
                        </td>
                        <td>
                            <select id="Select6">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text8" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                Hora:</label>
                            <input type="text" id="Text9" style="border: 0; color: #f6931f; font-weight: bold;">
                        </td>
                        <td>
                            Disciplina
                        </td>
                        <td>
                            Aluno
                        </td>
                        <td>
                            Grupo
                        </td>
                        <td>
                            Valor
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="Div3" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                            </div>
                        </td>
                        <td>
                            <select id="Select7">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text10" type="text" />
                        </td>
                        <td>
                            <select id="Select8">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text11" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                                Hora:</label>
                            <input type="text" id="Text12" style="border: 0; color: #f6931f; font-weight: bold;">
                        </td>
                        <td>
                            Disciplina
                        </td>
                        <td>
                            Aluno
                        </td>
                        <td>
                            Grupo
                        </td>
                        <td>
                            Valor
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="Div4" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                            </div>
                        </td>
                        <td>
                            <select id="Select9">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text13" type="text" />
                        </td>
                        <td>
                            <select id="Select10">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input id="Text14" type="text" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </table>
</body>
</html>
